<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8;charset=utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<title>HTML5实现图片拖动，旋转，放大，拉伸等特效</title>
		<!--[if IE]><script type="text/javascript" src="canvas_files/excanvas.js"></script><![endif]-->
		<style type="text/css" media="screen">
		body 	{ font: 75% "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; }
		canvas 	{ background-color: transparent; border: 1px solid gray; top: 0; left: 0; position: absolute; width:100%}
		canvas.resize-ne { cursor: ne-resize; }
		canvas.resize-se { cursor: se-resize; }
		canvas.resize-sw { cursor: sw-resize; }
		canvas.resize-nw { cursor: nw-resize; }
		canvas.move { cursor: move; }
		canvas.default { cursor: default; }
		img 	{ display: block; visibility: hidden; position: absolute;}
		input 	{ margin-left: 20px; }
		fieldset { width: 280px; float: left; }
		.fieldset { width: 200px; float: left; }
		#ft 	{ background-color: #eee; height: 70px; width: 99%; border-top: 1px solid #ccc; padding: 5px; position: absolute; top: 0; left: 0; }
		#ft span { width: 100%; }
	</style>
	<script src="canvas_files/utilitie.js" type="text/javascript" charset="utf-8"></script>
	<script src="canvas_files/canvasEl.js" type="text/javascript" charset="utf-8"></script>
	<script src="canvas_files/canvasIm.js" type="text/javascript" charset="utf-8"></script>
	
	
</head>
<body id="canvasdemo" onLoad="">	
	<canvas id="canvid1"></canvas>
	
	<img id="img1" src="canvas_files/4.jpg" width="120" height="200"/>
	<img id="img2" src="canvas_files/7.jpg" width="120" height="200"/>
	<img id="img3" src="canvas_files/8.jpg" width="120" height="200"/>
	<img id="img4" src="canvas_files/9.jpg" width="120" height="200"/>
	<img id="img5" src="canvas_files/5.jpg" width="120" height="200"/>
	<img id="bg" src="canvas_files/bg.jpg" width="100%" height="100%"/>
	

</body>
<script src="canvas_files/hammer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
		var hammertime = new Hammer(document.querySelector("#canvid1"));
		hammertime.get('pinch').set({ enable: true });
		hammertime.get('rotate').set({ enable: true });
		
		isrotate = '';

		var CanvasDemo = function() {
			var YD = YAHOO.util.Dom;
			var YE = YAHOO.util.Event;
			var canvas1;
			var img = [];
			return {
				init: function() {
					canvas1 = new Canvas.Element();
					canvas1.init('canvid1',  { width: YD.getViewportWidth() - 5, height: YD.getViewportHeight() - 5 });			
					img[img.length] = new Canvas.Img('img1', {});
					img[img.length] = new Canvas.Img('img2', {});
					img[img.length] = new Canvas.Img('img3', {});
					img[img.length] = new Canvas.Img('bg', {});
					img[img.length] = new Canvas.Img('img4', {});
					img[img.length] = new Canvas.Img('img5', {});


					// @param array of images ToDo: individual images
					
					canvas1.addImage(img[0]);
					canvas1.addImage(img[1]);
					canvas1.addImage(img[2]);
					canvas1.setCanvasBackground(img[3]);
					canvas1.addImage(img[4]);
					canvas1.addImage(img[5]);

					this.initEvents();
				},
				initEvents: function() {
					YE.on('togglebg','click', this.toggleBg, this, true);
					YE.on('showcorners','click', this.showCorners, this, true);
					YE.on('togglenone','click', this.toggleNone, this, true);
					YE.on('toggleborders','click', this.toggleBorders, this, true);
					YE.on('togglepolaroid','ready', this.togglePolaroid, this, true);
					YE.on('pngbutton','click', function() { this.convertTo('png') }, this, true);
					YE.on('jpegbutton','click', function() { this.convertTo('jpeg') }, this, true);
				},
				switchBg: function() {
					canvas1.fillBackground = (canvas1.fillBackground) ? false : true;							
					canvas1.renderAll();
				},
				
				//! insert these functions to the library. No access to _aImages should be done from here
				showCorners: function() {
					this.cornersvisible = (this.cornersvisible) ? false : true;
					for (var i = 0, l = canvas1._aImages.length; i < l; i += 1) {
						canvas1._aImages[i].setCornersVisibility(this.cornersvisible);
					}
					canvas1.renderAll();
				},
				toggleNone: function() {
					for (var i = 0, l = canvas1._aImages.length; i < l; i += 1) {
						canvas1._aImages[i].setBorderVisibility(false);
					}
					canvas1.renderAll();
				},
				toggleBorders: function() {
					for (var i = 0, l = canvas1._aImages.length; i < l; i += 1) {
						canvas1._aImages[i].setBorderVisibility(true);
					}
					canvas1.renderAll();
				},
				togglePolaroid: function() {
					for (var i = 0, l = canvas1._aImages.length; i < l; i += 1) {
						canvas1._aImages[i].setPolaroidVisibility(true);
					}
					canvas1.renderAll();
				},
				convertTo: function(format) {
					var imgData = canvas1.canvasTo(format);
					window.open(imgData, "_blank");
				},
				whatever: function(e, o) {
					// console.log(e);
					// console.log(o);
				}
			}
		}();
		YAHOO.util.Event.on(window, 'load', CanvasDemo.init, CanvasDemo, true);
	</script>
</html>

